<script setup lang="ts">
import { ref, computed } from 'vue'
import type { GoodsShelvesVo } from '@/types/goodsShelves'
import type { DonationType } from '@/types/home'

// 定义组件属性
const props = defineProps<{
  item: GoodsShelvesVo
  donationTypes: DonationType[]
  type: string // pickup 或 storage
}>()

// 定义事件
const emit = defineEmits(['pickup', 'openDoor'])

// 根据类型ID获取捐赠物类型名称
const categoryName = computed(() => {
  if (!props.item?.donation?.categoryId) return '未知类型'
  const category = props.donationTypes.find((item) => item.id === props.item.donation!.categoryId)
  return category?.typeName || '未知类型'
})

// 格式化日期
const formatDate = (dateStr?: Date | string) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
    date.getDate(),
  ).padStart(2, '0')}`
}

// 处理取货按钮点击
const handlePickup = () => {
  emit('pickup', props.item)
}

// 处理开门按钮点击
const handleOpenDoor = () => {
  emit('openDoor', props.item)
}
</script>

<template>
  <view class="donation-item">
    <view class="item-card">
      <!-- 捐赠物图片 -->
      <view class="item-image">
        <image
          v-if="item.donation?.images"
          :src="item.donation.images.split(',')[0]"
          mode="aspectFill"
        ></image>
      </view>

      <!-- 捐赠物信息 -->
      <view class="item-info">
        <view class="item-header">
          <text class="item-type">{{ categoryName }}</text>
          <text class="item-time">{{ formatDate(item.donation?.updateTime) }}</text>
        </view>

        <view class="item-desc text-ellipsis">{{ item.donation?.description || '暂无描述' }}</view>

        <!-- 操作按钮和货架号 -->
        <view class="item-actions">
          <text class="item-shelf">货架号: {{ item.shelfNumber }}</text>
          <view class="action-buttons">
            <view v-if="type === 'pickup'" class="action-btn pickup" @tap.stop="handlePickup()">
              取货
            </view>
            <view
              v-if="type === 'storage'"
              class="action-btn open-door"
              @tap.stop="handleOpenDoor()"
            >
              入库
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.donation-item {
  margin-bottom: 20rpx;

  .item-card {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .item-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      overflow: hidden;
      margin-right: 20rpx;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;

        .item-type {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }

        .item-time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .item-desc {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 20rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 最多两行 */
        -webkit-box-orient: vertical;
        white-space: normal;
        word-break: break-all;
      }

      .item-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-shelf {
          font-size: 26rpx;
          color: #2b85e4;
          font-weight: bold;
        }

        .action-buttons {
          display: flex;
          gap: 10rpx;

          .action-btn {
            width: 120rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            border-radius: 30rpx;
            font-size: 28rpx;

            &.pickup {
              background-color: #2b85e4;
              color: #fff;
            }

            &.open-door {
              background-color: #19be6b;
              color: #fff;
            }
          }
        }
      }
    }
  }
}

// 文本省略号通用样式
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
